<template>
  <div>
    <div
      id="ProcessBar"
      class="pB_Container"
      :style="{ height: height + 'px' }"
    >
      <!--   封装遍历-->
      <div
        v-for="(item, index) in processArray"
        :key="index"
        :style="{
          width: item.data + '%',
          backgroundColor: item.color,
          paddingLeft: 10 + 'px'
        }"
      />
    </div>
    <!-- <div class="pB_Container_bottom">
        <ul>
          <li v-for="(item,index) in processArray" :key="index">
            <span style="display:inline-block;width:10px;height: 10px;" :style="{backgroundColor: item.color}"></span>
            <span>{{item.name}}</span>
            <span class="data">{{item.data}}</span>
          </li>
          <li></li>
        </ul>
      </div> -->
  </div>
</template>

<script>
export default {
  name: 'ProcessBar',
  components: {},
  props: {
    processValue: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [0]
    },
    height: {
      type: Number }
  },
  data() {
    return {
      dataSum: 0,
      processArray: []
    }
  },
  created() {
    this.processValue.forEach(item => {
      this.dataSum += item.data
      console.log(this.height)
    })

    this.processArray = this.processValue.map(items => {
      return {
        data: Math.round((items.data / this.dataSum) * 100),
        color: items.color,
        name: items.name
      }
    })
    console.log(this.processArray)
  },
  methods: {
    getProcessDesc(data) {
      // #("")
      return data == 0 ? ' ' : data + '%'
    }
  }
}
</script>
<style scoped>
.pB_Container {
  width: 100%;
  background-color: #f5f5f5;
  height: 10px;
  display: inline-flex;
  line-height: 10px;
  overflow: hidden;
  color: white;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  /* margin: 0 15px 0 16px; */
}

.pB_Container div {
  float: left;
  /*border-radius: 8px;*/
}

.pB_Container_bottom ul {
  list-style: none;
  text-align: left;
}
.pB_Container_bottom ul li {
  float: left;
  display: inline-block;
  width: 33%;
}
.data {
  display: inline-block;
  float: right;
  padding-right: 10%;
  color: #ffde00;
  font-weight: 700;
  font-size: 16px;
}
</style>
